<template>
	<view
		class="ikz-menu"
		:style="{
			color: cssInfo.color,
			margintop: cssInfo.margin_top + 'rpx',
			backgroundColor: cssInfo.background_color,
			width: cssInfo.width + '%',
			borderRadius: cssInfo.bg_border_radius + 'rpx'
		}"
	>
		<!--
		模板说明：
		1、支持一行4个图标和5个图标，通过css数据中的menu_num数量控制
		2、支持颜色自定义，直接使用css数据中的color
		3、其他显示和功能数据同系统设定
		 -->
		
			<view class="swiper-item">
				<!-- <view class="ikz-menu-sm" style="color:{{cssInfo.color}};margin-top:{{cssInfo.margin_top}}rpx;background-color:{{cssInfo.background_color}};width:{{cssInfo.width}}%;border-radius:{{cssInfo.bg_border_radius}}rpx;"> -->
				<view class="ikz-menu-sm">
					<block v-if="cssInfo.num == 4">
						<block v-for="(item, indexs) in show_info" :key="indexs">
						<!--分享和客服功能-->
						<block v-if="item.url.path == 'share' || item.url.path == 'contact'">
							<view class="ikz-menu-item">
								<image class="ikz-menu-img" :src="item.src" :style="{ borderRadius: cssInfo.border_radius }"></image>
								<!-- <image class="ikz-menu-img" :src="item.src"></image> -->
								<view class="ikz-menu-title">{{ item.title }}</view>
								<button class="ikz-login-button" :open-type="item.url.path"></button>
							</view>
						</block>
						<!--分享和客服功能-->

						<!--正常功能-->
						<block v-else>
							<view class="ikz-menu-item" @click="directToPath" :data-info="item.url.info" :data-mode="item.url.mode" :data-path="item.url.path">
								<image class="ikz-menu-img" :src="item.src" :style="{ borderRadius: cssInfo.border_radius }"></image>
								<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
								<view class="ikz-menu-title">{{ item.title }}</view>
							</view>
						</block>
						<!--正常功能-->
					</block>
					</block>
					
					<block v-else>
						<block v-for="(item, indexs) in show_info" :key="indexs">
						<!--分享和客服功能-->
						<block v-if="item.url.path == 'share' || item.url.path == 'contact'">
							<view class="ikz-menu-item-small">
								<image class="ikz-menu-img" :src="item.src" :style="{ borderRadius: cssInfo.border_radius }"></image>
								<!-- <image class="ikz-menu-img" :src="item.src" style='border-radius:{{cssInfo.border_radius}}'></image> -->
								<view class="ikz-menu-title-small">{{ item.title }}</view>
								<button class="ikz-login-button" :open-type="item.url.path"></button>
							</view>
						</block>
						<!--分享和客服功能-->

						<!--正常功能-->
						<block v-else>
							<view class="ikz-menu-item-small" @click="directToPath" :data-info="item.url.info" :data-mode="item.url.mode" :data-path="item.url.path">
								<image class="ikz-menu-img" :src="item.src" :style="{ borderRadius: cssInfo.border_radius }"></image>
								<!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
								<view class="ikz-menu-title-small">{{ item.title }}</view>
							</view>
						</block>
						<!--正常功能-->
					</block>
					</block>
				</view>
			</view>
	</view>
</template>

<script>
import ikz from '@/pages/Common/tools';
export default {
	name: 'menu3',
	props: {
		showData: {
			type: Object
		},
		cssData: {
			type: Object
		}
	},
	data() {
		return {
			indicatorDots: true,
			vertical: false,
			autoplay: false,
			interval: 2000,
			duration: 500,
			background: ['', ''],
			cssInfo: {},
			badgeStyle: '',
			show_info: []
		};
	},
	watch: {
		showData: {
			handler(newName, oldName) {
				this.show_info = newName.list;
			},
			immediate: true,
			deep: true
		},
		cssData: {
			handler(newName, oldName) {
				var cssInfo = {};
				cssInfo.color = newName.color || '#353535';
				cssInfo.num = newName.num || 4;
				cssInfo.border_radius = newName.border_radius || 5;
				cssInfo.margin_top = newName.margin_top || 0;
				cssInfo.background_color = newName.background_color || '';
				cssInfo.width = newName.width || 100;
				cssInfo.bg_border_radius = newName.bg_border_radius || 0;
				this.cssInfo = cssInfo;
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {},
	methods: {
		setStyle() {
			this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`;
		},
		directToPath(e) {
			var mode  = e.currentTarget.dataset.mode;
			if(mode == 10){
				var path = e.currentTarget.dataset.path;
				ikz.nav(path,'ln');
			}else{
				var url = {
					info:e.currentTarget.dataset.info,
					mode:e.currentTarget.dataset.mode,
					path:e.currentTarget.dataset.path,
				}
				if(e.currentTarget.dataset.info == "token") {
					if(!uni.getStorageSync("user_info")) {
						uni.navigateTo({
							url: "/pages/login/index"
						})
						return
					}
				}
				ikz.path(url);
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
.ikz-menu {
	width: 100%;
	margin: auto;
}
.ikz-swiper {
	height: 380rpx;
	background: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	width: 95%;
	margin: 15rpx auto 0;
}
.ikz-menu-sm {
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}

.ikz-menu-item {
	width: 25%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
	margin: 15rpx 0px;
}
.ikz-login-button {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	border: 0px;
	z-index: 100;
}
.ikz-menu-item-small {
	width: 20%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
	margin: 15rpx 0px;
	font-size: 29rpx;
}

.ikz-menu-img {
	width: 90rpx;
	height: 90rpx;
}

.ikz-menu-img-circle {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.ikz-menu-img-small {
	width: 82rpx;
	height: 82rpx;
}

.ikz-menu-img-small-circle {
	width: 82rpx;
	height: 82rpx;
	border-radius: 50%;
}

.ikz-menu-title {
	width: 100%;
	margin-top: 9rpx;
	font-size: 28rpx;
}

.ikz-menu-title-small {
	width: 100%;
	margin-top: 5rpx;
	font-size: 25rpx;
}
</style>
